"use client"

import { cn } from "@/lib/utils"
import type React from "react"

interface GradientButtonProps {
  children: React.ReactNode
  onClick?: () => void
  className?: string
  disabled?: boolean
  variant?: "primary" | "secondary" | "success" | "danger"
}

export default function GradientButton({
  children,
  onClick,
  className,
  disabled = false,
  variant = "primary",
}: GradientButtonProps) {
  const variants = {
    primary: {
      outer: "bg-gradient-to-b from-stone-300/40 to-transparent",
      middle: "bg-gradient-to-b from-white to-stone-200/40",
      inner: "bg-gradient-to-b from-stone-200/40 to-white/80",
    },
    secondary: {
      outer: "bg-gradient-to-b from-blue-300/40 to-transparent",
      middle: "bg-gradient-to-b from-white to-blue-200/40",
      inner: "bg-gradient-to-b from-blue-200/40 to-white/80",
    },
    success: {
      outer: "bg-gradient-to-b from-green-300/40 to-transparent",
      middle: "bg-gradient-to-b from-white to-green-200/40",
      inner: "bg-gradient-to-b from-green-200/40 to-white/80",
    },
    danger: {
      outer: "bg-gradient-to-b from-red-300/40 to-transparent",
      middle: "bg-gradient-to-b from-white to-red-200/40",
      inner: "bg-gradient-to-b from-red-200/40 to-white/80",
    },
  }

  const currentVariant = variants[variant]

  return (
    <div className={cn("p-[4px] rounded-[16px] transition-all duration-200", currentVariant.outer, className)}>
      <button
        onClick={onClick}
        disabled={disabled}
        className={cn(
          "group p-[4px] rounded-[12px] shadow-[0_1px_3px_rgba(0,0,0,0.5)] active:shadow-[0_0px_1px_rgba(0,0,0,0.5)] active:scale-[0.995] transition-all duration-150",
          currentVariant.middle,
          disabled && "opacity-50 cursor-not-allowed",
        )}
      >
        <div className={cn("rounded-[8px] px-3 py-2 transition-all duration-150", currentVariant.inner)}>
          <div className="flex gap-2 items-center justify-center font-semibold text-gray-700 select-none">
            {children}
          </div>
        </div>
      </button>
    </div>
  )
}
